<template>
  <view class="approval-management">
    <MainHeader>审批管理</MainHeader>
    <view class="tab-bar">
      <view
        class="tab-title"
        :class="active === 0 ? 'active-title' : ''"
        @click="changeTabs('iInitiated')"
      >
        <view class="title-text">
          我发起的
        </view>
      </view>
      <view
        class="tab-title"
        :class="active === 1 ? 'active-title' : ''"
        @click="changeTabs('myApproval')"
      >
        <view class="title-text split-text">
          我的审批
        </view>
      </view>
    </view>
    <view class="tab-content" v-show="active === 0" id="tabContent">
      <view class="i-initiated">
        <!-- 我发起的 -->
        <view class="select-condition-block">
          <view class="state-selector" @click="selectState">
            {{ selectStateValue }}
          </view>
          <view class="type-selector" @click="selectType1">
            {{ selectTypeValue1 }}
          </view>
        </view>
        <view class="i-initiated-list">
          <view
            class="notification-item"
            v-for="item in iInitiatedList"
            :key="item.processId"
            @click="
              showDetail({ processId: item.processId, approvalType: active })
            "
          >
            <view class="notice-logo">
              <img :src="switchApprovalLogo(item.processName)" />
            </view>
            <view class="notice-title">
              {{
                item.processName === '销假、销出差' ? '销除' : item.processName
              }}申请
            </view>
            <view class="notice-desc">
              {{ formDateIOS(item.createTime).split(' ')[0] }}提交{{
                item.processName === '销假、销出差' ? '销除' : item.processName
              }}申请，{{ selectStateList[Number(item.processState)] }}
            </view>
            <view class="notice-time">
              {{ formDateIOS(item.createTime) }}
            </view>
          </view>
          <!-- 加载更多 -->
          <view
            class="get-more-info"
            v-show="showGetMore.iInitiatedList"
            @click="getMore('iInitiatedList')"
          >
            加载更多
          </view>
          <view class="get-all" v-show="!showGetMore.iInitiatedList">
            <view>
              以上是所有审批内容了
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="tab-content" v-show="active === 1">
      <view class="my-approval">
        <!-- 我的审批 -->
        <view class="select-condition-block">
          <view class="type-selector" @click="selectType2">
            {{ selectTypeValue2 }}
          </view>
        </view>
        <view class="my-approval-list">
          <view
            class="notification-item"
            v-for="item in myApprovalList"
            :key="item.processId"
            @click="
              showDetail({ processId: item.processId, approvalType: active })
            "
          >
            <view class="notice-logo">
              <img :src="switchApprovalLogo(item.processName)" />
            </view>
            <view class="notice-title">
              {{ item.username }}的{{
                item.processName === '销假、销出差' ? '销除' : item.processName
              }}
            </view>
            <view class="notice-desc">
              {{ formDateIOS(item.createTime).split(' ')[0] }}提交{{
                item.processName === '销假、销出差' ? '销除' : item.processName
              }}申请，{{ selectStateList[Number(item.processState)] }}
            </view>
            <view class="notice-time">
              {{ formDateIOS(item.createTime) }}
            </view>
          </view>
          <!-- 加载更多 -->
          <view
            class="get-more-info"
            v-show="showGetMore.myApprovalList"
            @click="getMore('myApprovalList')"
          >
            加载更多
          </view>
          <view class="get-all" v-show="!showGetMore.myApprovalList">
            <view>
              以上是所有审批内容了
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 状态类型选择器 -->
    <van-popup
      v-if="ifSelectorShow"
      :show="ifSelectorShow"
      position="bottom"
      custom-style="height: 40%;"
      @close="closeSelector"
    >
      <van-picker
        show-toolbar
        visible-item-count="5"
        :columns="selectorList"
        :default-index="selectDefaultValue"
        toolbar-class="toolbar-class"
        column-class="column-class"
        @confirm="selectorConfirm"
        @cancel="selectorCancel"
      />
    </van-popup>
  </view>
</template>
<script src="./script.js"></script>
<style lang="less" src="./style.less"></style>
